<template>
  <div class="center">
    <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="修改密码" sub-title="修改密码需谨慎"
      @back="handleBack" />
    <a-card style="overflow: auto;">
      <a-form :model="userInfo" name="basic" autocomplete="off" ref="formRef" @finish="onFinish"
        :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-form-item label="用户名" name="username" :disabled="true">
          <a-input v-model:value="userInfo.username" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item label="旧密码" name="oldPwd" :rules="[{ required: true, message: '请输入密码!' }]">
          <a-input-password v-model:value="userInfo.oldPwd" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item label="新密码" name="newPassword" :rules="[{ required: true, message: '请输入密码!' }]">
          <a-input-password v-model:value="userInfo.newPassword" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 24 }">
          <a-button type="primary" block html-type="submit" :loading="confirmLoading">修改密码</a-button>
          <a-button style="margin-top: 8px" block @click="handleReset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { getAdminInfo,editAdminPassword} from '@/apis/user.js';

const router = useRouter();
const userInfo = ref({});
const formRef = ref();

const confirmLoading = ref(false);

const handleBack = () => {
  router.back();
}

const handleReset = () => {
  formRef.value?.resetFields();
};

const onFinish = async (values) => {
  console.log(values,'values');
  confirmLoading.value = true;
  try {
    const { code,msg } = await editAdminPassword({
      oldPwd:values?.oldPwd,
      password: values?.newPassword
    });
      if(code === 200){
          message.success(msg);
          router.push('/');
          init();
          return;
      }
      message.error(msg);
      confirmLoading.value = false;

  } catch (error) {
    confirmLoading.value = false;
    console.log(error, 'user-register-error');
  }
};
const init = async () => {
  try {
    const res = await getAdminInfo();
    userInfo.value = res.data;

  } catch (error) {
    console.log(error, 'get-user-info-error');

  }
}
onMounted(() => {
  init();
})

</script>

<style lang="less" scoped>
.center{
  overflow: auto;
}
</style>
